Section 0 - Introduction & Setup

How to Use This Tutorial

Welcome! Learning React is the best investment you can make in web development. React is a highly-popular library that allows you to write fast and interactive user interfaces!

Learning React, and all the other skills related to React development, can be overwhelming. Giving you too many details will ruin your learning experience. At the same time, I understand how frustrating it is to follow code but not know what you’re doing. Therefore, I’ve highlighted parts that are too complex for beginners in blue. Feel free to skip ahead if this is your first time learning React with the peace of mind knowing that you can always come back. Your first priority as a beginner is to make your code work, not to understand everything.

Once you’ve finished the course, I encourage you to go back and try to understand all the details. Just like in video games, your first walkthrough should be in easy mode. Once you’ve defeated the final boss, go back and replay the game in hard mode!

There are coding exercises throughout the course. Answers to those exercises are in light gray like so: You saw me! Try not to peek at the answer before you finish an exercise. The best way to learn is to work on your own!

Enjoy! Feel free leave comments here or send an email to devfox.contact@gmail.com feedback!

Setting up React

The following sections describe the different ways of setting up a React environment. Use Option 0 - Codepen for section 2 of the course, then Option 1 - Create React App for section 3 and onwards. Option 2 is meant for advanced students.

Option 0 - Codepen

Codepen allows you to run code in the browser. You don’t have to install a code editor and Node.js. The minimal setup allows you to start coding quickly! It is the perfect way to start learning React. People also share super helpful code snippets on Codepen that you can borrow for your projects! Visit codepen.io. I recommend you make an account so that you can save your work, but you can still follow these steps if you don’t have an account.

Click on “Create”, then click “New pen” from the drop down menu.

Click on settings on the top right section.

Click on “JavaScript”

Under “JavaScript Preprocessor”, select “babel” from the drop down menu.

Then, near the bottom of the menu, next to “quick add”, select “React”, then select “React DOM” to add the two packages to your project. Click “Save & Close”.

In the HTML section, type in:

In the JavaScript section, type in:

ReactDOM.render(

<div>Hello World</div>,

document.getElementById('root')

);

If you see “Hello World” rendered, then you’re done!

Option 1 - Create React App

Create React App is a package that helps you set up react on your machine. Visit nodejs.org and install the latest version (click on the green box on the left labeled “LTS”) of Node.js. This will install Node.js, along with npm (node module manager).

Open your terminal, type in the following:

npx create-react-app my-app
cd my-app
npm start

You’re done!

Option 2 - Setting up React from Scratch

Visit https://nodejs.org/ and install the latest version (click on the green box on the left labeled “LTS”) of Node.js. This will install Node.js, along with npm (node module manager).

Open your terminal, type in the following:

mkdir react-app && cd react-app

Now, to initialize your project with npm so that you can install npm packages, type in:

npm init -y

Now, to install the React and ReactDOM packages, type in the following:

npm install --save react react-dom

Next, you need the Babel package in order to write in ES6 and JSX syntax, type in the following into your terminal:

npm install --save-dev babel-core babel-loader babel-preset-react

Create a new file named .babelrc, and type the following into the file to configure Babel:

{ presets: ['react'] }

Babel doesn’t work on its own. You’ll need Webpack to transpile your code for you. Webpack also transforms your HTML, JavaScript and CSS files. Type in the following in your terminal (there’s a total of 5 packages):

npm install --save-dev webpack webpack-dev-server html-webpack-plugin css-loader style-loader

Create a new file named webpack.config.js, and type the following into the file to configure Webpack:

const HTMLWebpackPlugin = require('html-webpack-plugin');

const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({

template: __dirname + '/src/index.html',

filename: 'index.html',

inject: 'body'

})

module.exports = {

entry: __dirname + '/src/index.js',

module: {

rules: [

{

test: /\.js$/,

exclude: /node_modules/,

use: 'babel-loader'

{

test: /\.css$/,

use: [ 'style-loader', 'css-loader' ]

}

]

output: {

filename: 'bundle.js',

path: __dirname + '/dist'

plugins: [HTMLWebpackPluginConfig]

};

Now with Babel and Webpack set up, you can start creating your HTML and JavaScript files! Create a folder named src, and create three files - index.html, index.js and main.css.

In your index.html file, type in:

<!DOCTYPE html>

<head>

<title>Hello World</title>

</head>

<body>

</body>

</html>

In your index.js file, type in:

import './main.css';

const React = require('react');

const ReactDOM = require('react-dom');

ReactDOM.render(<div>Hello World</div>, document.getElementById('app'))

In your main.css files, type in:

div{

color:red

}

Finally, open your package.json file, modify your “script” key so that it looks like:

"scripts": {

"build": "webpack --mode production",

"start": "webpack-dev-server --mode development"

}

Go back to your terminal again. Test that your webpack build is working by typing:

npm run build

Webpack might prompt you to install either webpack-cli or webpack-command:

Type in:

webpack-cli

to install webpack-cli.

The script will generate a dist folder, open the index.html file in it in your browser to make sure webpack worked!

Let’s try out the webpack-dev-server. In your terminal, type in:

npm start

Visit http://localhost:8080 (or whatever URI your terminal instructs you to visit), and you should see the same result! What’s different is that this is a local server with hot reloading! This means that whenever you change your files, you browser will update automatically to reflect those changes!

I Need Your Feedback!

The feedback form only takes 30 seconds to complete. There’s no team behind the tutorial series. There’s only me. Your feedback would really help me a great ton.

Final Code

Here is the code for Option 2 setup.