Docs for learning React: Hello, World!
Chrome extensions for React:
Local server with Node
Install and start a local server: httpster (note: This requires Node and npm, which were covered here, including how to install them). Tip: cd into the directory containing your files before entering the command to start the server.
thedirectory $ httpster
With a basic Hello, World app running in my browser, here’s what the React Developer Tools gave me (open the usual Chrome Developer Tools; find React on the far right side or on the drop-down menu):
There’s no requirement that you use httpster specifically, but you need to be running some server locally.
Likely you will use Webpack with React, so you can just use webpack-dev-server.
Then: “JSX is not natively supported by the browser.” This is why we need Babel (also covered in my earlier post) to transpile the code. It just gets worse and worse.
Project file structure
You’ll need two distinct folders in your project (in addition to node_modules): one for the stuff you actually build, and other for the files that run in the user’s browser. In the first videos I watched, these were named build and app. In this set of videos, they’re named src and dist.
What you name these folders doesn’t really matter — you will define their roles in the webpack.config.js file (assuming you’re using Webpack), but you have to be clear on what the purpose of each one is — so you’re putting your files in the correct place.
In the last video in section 2 (React.js Essential Training), I understood how the loaders work, or rather, how they are set up in the webpack.config.js file. The test property uses a regex string to indicate which file extensions will be governed by the specified loader. Each loader must be installed with npm, and it is specified in the loaders array.
In the strings for CSS and SCSS, the slam (!) separates multiple loaders, which will run in the order given, left to right.
- Obviously there’s no point in learning React to build tiny little websites or apps.
- Using a Python framework (e.g. Flask) is simpler than this.
- I haven’t gotten to the components yet. Maybe when I do, I will feel more friendly toward React.