App to show all cells where the Knight can move in a the selected position after exactly 2 turns
This project was bootstrapped with Create React App.
Below you will find some information on how to perform common tasks.
You can find the most recent version of this guide Create React App here.
- Folder Structure
- Available Scripts
- Supported Browsers
- Changing the Page
<title>
- Installing a Dependency
- Importing a Component
- Adding a Stylesheet
- Post-Processing CSS
- Fetching Data with AJAX Requests
- Integrating with an API Backend
After creation, your project should look like this:
chess-app/
README.md
CONTRIBUTING.md
package.json
node_modules/
public/
index.html
favicon.ico
src/
Board.css
Board.js
Cell.js
index.css
index.js
Knight.js
For the project to build, these files must exist with exact filenames:
public/index.html
is the page template;src/index.js
is the JavaScript entry point.
You may create subdirectories inside src
. For faster rebuilds, only files inside src
are processed by Webpack.
You need to put any JS and CSS files inside src
, otherwise Webpack won’t see them.
Only files inside public
can be used from public/index.html
.
Read instructions below for using assets from JavaScript and HTML.
You can, however, create more top-level directories.
They will not be included in the production build so you can use them for things like documentation.
In the project directory, you can run:
npm install
Installs the project dependences.
npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
By default, the generated project uses the latest version of React.
You can refer to the React documentation for more information about supported browsers.
You can find the source HTML file in the public
folder of the generated project. You may edit the <title>
tag in it to change the title from “React App” to anything else.
The generated project includes React and ReactDOM as dependencies. It also includes a set of scripts used by Create React App as a development dependency. You may install other dependencies (for example, React Router) with npm
:
npm install --save react-router
Alternatively you may use yarn
:
yarn add react-router
This works for any library, not just react-router
.
This project setup supports ES6 modules thanks to Babel.
While you can still use require()
and module.exports
, we encourage you to use import
and export
instead.
For example:
import React, { Component } from 'react';
class Button extends Component {
render() {
// ...
}
}
export default Button; // Don’t forget to use export default!
import React, { Component } from 'react';
import Button from './Button'; // Import a component from another file
class DangerButton extends Component {
render() {
return <Button color="red" />;
}
}
export default DangerButton;
Be aware of the difference between default and named exports. It is a common source of mistakes.
We suggest that you stick to using default imports and exports when a module only exports a single thing (for example, a component). That’s what you get when you use export default Button
and import Button from './Button'
.
Named exports are useful for utility modules that export several functions. A module may have at most one default export and as many named exports as you like.
Learn more about ES6 modules:
This project setup uses Webpack for handling all assets. Webpack offers a custom way of “extending” the concept of import
beyond JavaScript. To express that a JavaScript file depends on a CSS file, you need to import the CSS from the JavaScript file:
.Button {
padding: 20px;
}
import React, { Component } from 'react';
import './Button.css'; // Tell Webpack that Button.js uses these styles
class Button extends Component {
render() {
// You can use them as regular CSS styles
return <div className="Button" />;
}
}
This is not required for React but many people find this feature convenient. You can read about the benefits of this approach here. However you should be aware that this makes your code less portable to other build tools and environments than Webpack.
In development, expressing dependencies this way allows your styles to be reloaded on the fly as you edit them. In production, all CSS files will be concatenated into a single minified .css
file in the build output.
If you are concerned about using Webpack-specific semantics, you can put all your CSS right into src/index.css
. It would still be imported from src/index.js
, but you could always remove that import if you later migrate to a different build tool.
This project setup minifies your CSS and adds vendor prefixes to it automatically through Autoprefixer so you don’t need to worry about it.
For example, this:
.App {
display: flex;
flex-direction: row;
align-items: center;
}
becomes this:
.App {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
If you need to disable autoprefixing for some reason, follow this section.
React doesn't prescribe a specific approach to data fetching, but people commonly use either a library like axios or the fetch()
API provided by the browser. Conveniently, Create React App includes a polyfill for fetch()
so you can use it without worrying about the browser support.
The global fetch
function allows to easily makes AJAX requests. It takes in a URL as an input and returns a Promise
that resolves to a Response
object. You can find more information about fetch
here.
This project also includes a Promise polyfill which provides a full implementation of Promises/A+. A Promise represents the eventual result of an asynchronous operation, you can find more information about Promises here and here. Both axios and fetch()
use Promises under the hood. You can also use the async / await
syntax to reduce the callback nesting.
You can learn more about making AJAX requests from React components in the FAQ entry on the React website.
This tutorial will help you to integrate your app with an API backend running on another port,
using fetch()
to access it.
Check out this tutorial. You can find the companion GitHub repository here.