I did a little bit of React last year but it's evolving so fast that already a lot of things have changed,
The most widely praised thing I hear on the javascript grapevine is create-react-app.
It's the latest incarnation of productivity aids like Google's Web Starter Kit.
It will pick all the defaults for us and set up a development environment for building a React app.
What's more, it doesn't seem all that complicated.
One of the problems with the fact that React has evolved so quickly is that there is a lot of out of date information floating around about it still. That's why I'm going to pick up as much as possible from the docs themselves since I figure Facebook are the only people who have a responsibility to make sure their materials are up to date.
So far the docs are great. They told me to install create-react-app and how use it to init a directory and start a server that shows my app live in the browser.
I'm led to believe that this live version has the full hot-reloading goodness.
We can build the app using npm run build
Note: the resulting files are minified into a single line. On the version of Atom (1.14) that I was using, these very long single lline were causing the editor to hang.
I Googled the issue and found it being discussed and a fix promised in 1.16. I noticed an issue with Atom not getting updated in the dock even though it seemed to be up to date in my applications folder. I successfully updated to 1.17 and all was well. I briefly considered installing Visual Studio Code, but it seems to be closed source and I prefer open source tools.
https://facebook.github.io/react/docs/installation.html#creating-a-new-application
If we install create react app, we see the placeholder app running in the browser.
This is a brief examination of the files that create-react-app makes...
?The instructions we're next given at the tutorial are
If you want to do it, here are the steps to follow:
Make sure you have a recent version of Node.js installed.
Follow the installation instructions to create a new project.
Delete all files in the src/ folder of the new project.
Add a file named index.css in the src/ folder with this CSS code.
Add a file named index.js in the src/ folder with this JS code, .
Now if you run npm start in the project folder and open http://localhost:3000 in the browser, you should see an empty tic-tac-toe field.
We recommend following these instructions to configure syntax highlighting for your editor.
The css code we are told to add is
body {
font: 14px "Century Gothic", Futura, sans-serif;
margin: 20px;
}
ol, ul {
padding-left: 30px;
}
.board-row:after {
clear: both;
content: "";
display: table;
}
.status {
margin-bottom: 10px;
}
.square {
background: #fff;
border: 1px solid #999;
float: left;
font-size: 24px;
font-weight: bold;
line-height: 34px;
height: 34px;
margin-right: -1px;
margin-top: -1px;
padding: 0;
text-align: center;
width: 34px;
}
.square:focus {
outline: none;
}
.kbd-navigation .square:focus {
background: #ddd;
}
.game {
display: flex;
flex-direction: row;
}
.game-info {
margin-left: 20px;
}
Th js code looks like this
class Square extends React.Component {
render() {
return (
<button className="square">
{/* TODO */}
</button>
);
}
}
class Board extends React.Component {
renderSquare(i) {
return <Square />;
}
render() {
const status = 'Next player: X';
return (
<div>
<div className="status">{status}</div>
<div className="board-row">
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
<div className="board-row">
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
</div>
<div className="board-row">
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
</div>
</div>
);
}
}
class Game extends React.Component {
render() {
return (
<div className="game">
<div className="game-board">
<Board />
</div>
<div className="game-info">
<div>{/* status */}</div>
<ol>{/* TODO */}</ol>
</div>
</div>
);
}
}
// ========================================
ReactDOM.render(
<Game />,
document.getElementById('root')
);
The instructions for adding code highlighting...
For Atom
Atom
Install language-babel package and follow the instructions.language-babel is here
Installation
Install via ATOM or by using apm install language-babel. If you only need to use the provided grammar read no further!Once we do this then our editor should work properly with the strange syntax of JSX.
The most useful of the features it adds, in what I've done with React so far has been the 'comment out JSX'. If you try to comment out parts of it without this plugin, you break the code because regular HTML comments don't work right in JSX.
HMMM - I get a filed to compile error message in the browser. This is both informative and frustrating.
./src/index.js
Line 1: 'React' is not defined no-undef
Line 4: 'React' must be in scope when using JSX react/react-in-jsx-scope
Line 11: 'React' is not defined no-undef
Line 13: 'React' must be in scope when using JSX react/react-in-jsx-scope
Line 20: 'React' must be in scope when using JSX react/react-in-jsx-scope
Line 21: 'React' must be in scope when using JSX react/react-in-jsx-scope
Line 22: 'React' must be in scope when using JSX react/react-in-jsx-scope
Line 27: 'React' must be in scope when using JSX react/react-in-jsx-scope
Line 32: 'React' must be in scope when using JSX react/react-in-jsx-scope
Line 42: 'React' is not defined no-undef
Line 45: 'React' must be in scope when using JSX react/react-in-jsx-scope
Line 46: 'React' must be in scope when using JSX react/react-in-jsx-scope
Line 47: 'React' must be in scope when using JSX react/react-in-jsx-scope
Line 49: 'React' must be in scope when using JSX react/react-in-jsx-scope
Line 50: 'React' must be in scope when using JSX react/react-in-jsx-scope
Line 51: 'React' must be in scope when using JSX react/react-in-jsx-scope
Line 60: 'ReactDOM' is not defined no-undef
Line 61: 'React' must be in scope when using JSX react/react-in-jsx-scope
Search for the keywords to learn more about each error.What did I do wrong? it seems like, for some reason, React isn't being loaded.
There's nothing obviously wrong. Instead of trying to tinker with it, I'm going to assume I stuffed something up, even though it seemed quite simple (never underestimate yourself!)
I'm going to repeat the steps above in a new directory and check that the create-react-app default app works again (as it did, just before)
DOH! LEARN TO READ
and then add three lines to the top of it:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';OK, BETTER - now we have a blank tic-tac-toe line at the top and we will remember that we need to import react!!!
COME BACK to here https://facebook.github.io/react/tutorial/tutorial.html#help-im-stuck
If I get stuck.
The next thing I'm going to do is put my project under version_control, so that we have an equally calm way of dealing with any major malfunctions to our code in the future.