- Part 1: Setting up React
- Part 2: Writing your first component
- Part 3: State vs Props
- Part 4: Component Lifecycle
- Part 5: Components Nesting
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)
I highly recommend installing and using
yarn instead of npm to install new dependencies.
On macOS simply install it with Homebrew:
For the other platforms, I’ll let you check the official website.
Yarn will allow you to manage your dependencies faster than npm.
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.