Nicolas Thiry
Learning React.js: A step by step course

Learning React.js: A step by step course

  tutorial, react

React has become very popular among developers within the past few years. Many Javascript developers have switched from other libraries to React and sometimes switching from a different library may be difficult to understand the basics of React.


Summary


Part 1: Setting up React

React has grown a lot since it’s release and the way I get started with a new React project has changed too. This was the part I hated the most with React, I didn’t know much about webpack, browserify, … therefore it was difficult for me to get the right settings. Dan Abramov (a React beast), created a node module, create-react-app on GitHub, that helps you do all the dirty stuff (webpack config, install core dependencies, …). It’s amazing and I strongly advise you to use it.

The documentation of this utility is very well written. I won’t rewrite it again and let those who want further informations go check out the official docs.

Here are the commands you need to run to get your app up and running ! (Assuming you have Node installed)

npm install -g create-react-app

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

I highly recommend installing and using yarn instead of npm to install new dependencies. On macOS simply install it with Homebrew:

brew install yarn

For the other platforms, I’ll let you check the official website.

Yarn will allow you to manage your dependencies faster than npm.

// Add new dependencies
yarn add DEPENDENCY_NAME

If you have already run create-react-app you will see that in the generated files, there is an src folder. This is the folder where you will be working with all your JS files. You have some default code in there that we will look into deeper in the next sections.

react webpack

Similar Posts

Comments

© Nicolas Thiry 2017