![]() ![]() You are done! To see everything working, you can head to the project root and run npm start. getElementById ( 'root' ), ) registerServiceWorker ( ) _REDUX_DEVTOOLS_EXTENSION_ ( ), ) /* eslint-enable */ĭocument. import statement and class definition render ( ) from 'redux' import './index.css' import Game from './containers/Game' import reducer from './reducers' import registerServiceWorker from './registerServiceWorker' /* eslint-disable no-underscore-dangle */ const store = createStore ( src/App.js import logo from './logo.svg' import './App.css' Īnd by refactoring the render ( ) method to: //. This is easily solved by removing two import statements from the. Removing these files will probably generate an error if you try to execute your project. svg: you won't use React's logo in this game ![]() js: tests might be addressed in another article, but you won't use it for now css: the App component is important but the styles definitions will be delegated to other components For example, you can get rid of the following files: Right now, what you will want to do is to remove some stuff that you won't need. As such, if you are interested in learning its details, you can check the official create -react -app GitHub repository and its user guides. The create -react -app tool is popular, well documented, and well supported by the community. This tool will create a structure similar to the following one: |- node_modules # change directory to the new project cd aliens-go-home Having Node.js and NPM installed locally (the latter has to be 5.2 and higher), you can use create -react -app without even installing it: # using npx will download (if needed) # create-react-app and execute it As you probably know (it doesn't matter if you don't), create -react -app is an open-source tool, maintained by Facebook, that helps developers to start developing in React in no time. The very first thing you will do to create a game with React, Redux, and SVG is to use create -react -app to bootstrap your project. Bootstrapping a React Project with Create-React-App Oh, and don't forget to push these changes. Then, after finishing each section, commit changes to this repository. Also, create an account on GitHub (if you don't have one yet) and a repository to save your project. This will allow you to easily see the changes proposed by these sections, making your life easier while learning through tutorials like this one. For example, if you are using Git and you create a new buggy version of your app, you can easily move back to the previous code with just a few commands.Īnother great advantage is that you can follow each section of this series and commit the code developed on them in separately. You can use services like GitHub (the best!) or BitBucket (not bad, to be honest) and save your code to trustworthy cloud infrastructures.īesides assuring that your code will remain safe, tools like that facilitate grasping the development process. Why would you start creating a project and don't back it up? You don't even have to pay for it. All professional developers use Git (or another version control system like Mercurial or SVN) while developing, even for pet projects. Before StartingĪlthough the previous section has not mentioned anything about Git, this is a good tool to have around. ![]() Nevertheless, this series includes links to relevant articles, posts, and documents that provide better explanations of topics that deserve more attention. However, if you do so, you will have an easier time to grasp the different topics and how they fit together. You don't have to have deep knowledge about the JavaScript programming language or how React, Redux, and SVG work to follow this series. But don't play too much, you have work to do! PrerequisitesĪs the prerequisites to follow this series, you will need some knowledge on web development (JavaScript mainly) and a development machine with Node.js and NPM installed. If you are curious, you can find the final game up and running here. To kill these flying discs you will have to point and click on an SVG canvas to make your cannon shoot. The game that you will develop in this series is called Aliens, Go Home! The idea of this game is simple, you will have a cannon and will have to kill flying discs that are trying to invade the earth. You can find the final code developed in this article in the following GitHub repository: Aliens Go Home - Part 1 The React Game: Aliens, Go Home! The knowledge acquired throughout this series will also allow you to create other types of animations that are orchestrated by React and Redux, not only games. TL DR: In this series, you will learn how to make React and Redux control a bunch of SVG elements to create a game.
0 Comments
Leave a Reply. |