So far, I have not looked into the React Flux patten much and intend to do that soon. However, I wanted to go through a step-by-step guide to getting up and running with React.
In this series, I want to go a bit further than showing just how React props and events work. I'll introduce building modules that can be consumed with React using test-driven development, Webpack for React, and react-hot-loader to make browser development more seamless.
For this guide, I'm going to use Karma as the Jasmine test runner. Also, I'm not going to use Bower for JavaScript package management at all. I'll favour using npm as both package manager and task runner.
In this example, I'm going to build a small Conway's Game of Life. It will be fairly simple, but complete. You can see the completed repository on github (feel free to send pull requests!).
Getting the environment set up
I'm going to be working on a Ubuntu flavor Linux machine, but I'm fairly certain all of these commands will work the same on any platform. I'm going to assume you have node and npm installed (I'm using node.js v0.10.36).The directory structure is very simple:
root
├── src
│ ├── components
│ └── game
├── styles
└── tests
└── game
The root directory will hold the index.html that we'll serve (as well as some config files).
Let's start to pull in some of the tools that we'll be using:
First, install Karma, Jasmine and PhantomJS from npm with:
$ npm install karma --save-dev
$ npm install karma-jasmine karma-phantomjs-launcher --save-dev
I also installed the karma-cli in order to make running Karma slightly easier:
$ npm install -g karma-cli
This should be enough to get started writing the game module. In order to test that everything is set up correctly, let's run a few commands:
$ phantomjs --version
$ 1.9.0
$ karma --version
$ Karma version: 0.12.35
The last thing we have to do before writing some code is to configure Karma. I used the command karma init command to generate a new config file. Most of the questions should be straight forward. Select jasmine as the testing framework and PhantomJS as the browser. Finally, we need to add the /src and /tests directory to the files array so that Karma will track these files:
// list of files / patterns to load in the browser
files: [
'src/**/*.js',
'tests/**/*.js'
],
Some Test-Driving with Karma
We are now ready to add a test harness for the game module. Add a new file named game-test.js to the /tests/game directory.The first test that we'll write will be to create a 30 x 30 grid. The grid will be represented as a simple array of arrays:
Now create a new file in /src/game named game.js where we can begin to implement the game. We can now create an empty Game module:
Run Karma to see a red test:
$ karma start
This should fail and give because the grid() function isn't defined yet. Let's change that now:
Now when we re-run our tests with karma, it should run green.
In the next post, we'll finish the Game module and start to introduce React with Webpack.
Great post, most informative. I’m looking forward to read more of your work.
ReplyDeleteBest Regards,
ReactJS Online Training in India
ReactJS Training in Hyderabad
ReactJS Online Training in Hyderabad
ReactJS Online Training
Learn ReactJS Online
ReactJS Training
ReactJS Online Course
React JS Online Training
ReactJS Training Institutes in Hyderabad
ReactJS Training Hyderabad
ReactJS Institutes in Hyderabad
ReactJS Classroom Training in Hyderabad
Best ReactJS Training in India
Learn ReactJS Course in Hyderabad
CourseIng
Great Article Cloud Computing Projects
DeleteNetworking Projects
Final Year Projects for CSE
JavaScript Training in Chennai
JavaScript Training in Chennai
The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training
I am really very happy to find this particular site. I just wanted to say thank you for this huge read!! I absolutely enjoying every petite bit of it and I have you bookmarked to test out new substance you post.
ReplyDeleteReactJS Online Training
Really you have done great job,There are may person searching about that now they will find enough resources by your post
ReplyDeleteSoftware Testing Training in Chennai | Software Testing Training in Anna Nagar | Software Testing Training in OMR | Software Testing Training in Porur | Software Testing Training in Tambaram | Software Testing Training in Velachery
A great content.Really informative article. Java training in Chennai | Certification | Online Course Training | Java training in Bangalore | Certification | Online Course Training | Java training in Hyderabad | Certification | Online Course Training | Java training in Coimbatore | Certification | Online Course Training | Java training in Online | Certification | Online Course Training
ReplyDelete